<template>
  <div>
    <div class="task-history">
      <div class="history-header">
        <i></i>
        <span>历史进度</span>
      </div>
      <div class="history-content">
        <div class="history-time">
          <p><span>计划用时：</span>{{taskInfo.taskdetail.use_time}}</p>
          <p :class="{'color-green': taskInfo.taskdetail.is_ahead==1}"><span>实际用时：</span>{{taskInfo.taskdetail.job_time}}</p>
          <p :class="{'color-2': taskInfo.taskdetail.is_over_time==1}"><span>任务超时：</span>{{taskInfo.taskdetail.over_time}}</p>
        </div>
        <div class="history-timeline clearfix">
          <div class="time-line" v-for="(progress,index) in taskInfo.process">
            <div class="time-line-left" :class="{'color-2': progress.is_over_time==1}">
              <span v-if="progress.date.length>0">{{progress.date}}<br/></span>
              <span v-if="progress.is_over_time==1">已超时</span>
            </div>
            <div class="time-line-circle"></div>
            <div class="time-line-right">
              <div class="line-right-text">
                <span class="span-t">{{progress.text}}</span>
                <span class="span-content">{{progress.remark}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .task-history{
    width:48.2%;
    float:right;
    min-width:450px;
  }
  .task-history .history-header{
    height:40px;
    line-height:40px;
    background-color:#e4e7ed;
    font-size:14px;
    color:#1f2d3d;
  }
  .history-header i{
    display: inline-block;
    width:3px;
    height:14px;
    background-color:#409eff;
    position:relative;
    top:2px;
    margin-right:6px;
    margin-left:16px;
  }
  .task-history .history-content{
    background-color:#f0f0f0;
    padding:14px 28px 28px;
    font-size:14px;
  }
  .history-content .history-time{
    color:#909399;
  }
  .history-time p span{
    display: inline-block;
    margin-right:10px;
    color:#909399;
  }
  .history-timeline{
    margin-top:28px;
  }
  .history-timeline .time-line{
    display: flex;
    position:relative;
    overflow: hidden;
    vertical-align: center;
  }
  .time-line .time-line-left{
    width:126px;
    color:#909399;
    position:relative;
    top:-2px;
    text-align: right;
  }
  .time-line .time-line-circle{
    width:10px;
    height:10px;
    border-radius:10px;
    background-color:#909399;
    position:relative;
    top:0px;
    margin:0 14px;
  }
  .time-line .time-line-right{
    width:58.8%;
  }
  .time-line-right .line-right-text span{
    display: block;
    line-height: 24px;
  }
  .line-right-text .span-t{
    color:#606266;
    margin-top:-5px;
  }
  .line-right-text .span-content{
    color:#909399;
    margin-top:8px;
    padding-bottom:30px;
  }
  .time-line-circle:after{
    content: '';
    width:2px;
    height:100vh;
    background-color: #909399;
    margin-left:-1px;
    position:absolute;
    left:50%;
  }
  .time-line:last-of-type .time-line-circle:after{
    height:0;
  }
  .color-2{
    color:#f56c6c!important;
  }
  .color-green{
    color:#67C23A!important;
  }
  .background-cicle{
    background-color: #303133!important;
  }
  .color-cs{
    color:#303133!important;
  }
</style>
<script>
  export default{
    props: {
      taskInfo: Object
    },
    data() {
      return {
      }
    },
    created() {
    },
    methods: {
    }
  }
</script>
